<template>
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播图 和 分类 -->
    <BannerWrap @updateCurrentTypeDate="getContestListByCategory" />
    <!-- 热门竞赛 -->
    <NavigationList :title="hotRaceData.navigationTitle" />
    <!-- 热门竞赛list -->
    <HotRaceList v-slot="{ item }" :type="0" :list="hotRaceData.hotRaceList">
        <div class="info">
            <a class="title">
                {{ item.title }}
            </a>
            <div class="item-tit"><span class="i-lable">主办方：</span>{{ item.organizer }}</div>
            <div class="item-tit">
                <span class="i-lable">报名时间：</span>
                {{ item.startDate }} ~ {{ item.endDate }}
            </div>
            <div class="item-tit">
                <span class="i-lable">比赛时间：</span>
                {{ item.enrollStartDate }} ~ {{ item.enrollEndDate }}
            </div>
        </div>
    </HotRaceList>
    <!-- 分页器 -->
    <Pagination
        v-if="paginationDate.total > 0"
        @change="changePage"
        :prev-icon="ArrowLeftBold"
        :next-icon="ArrowRightBold"
        class="pagination"
        small
        layout="prev, pager, next"
        :total="paginationDate.total"
    />
    <!-- 最新竞赛list -->
    <NewRaceList :type="0" v-slot="{ item }" :list="newRaceData.hotRaceList" :title="newRaceData.newRaceTitle">
        <div class="info">
            <a class="title">
                {{ item.title }}
            </a>
            <div class="item-tit"><span class="i-lable">主办方：</span>{{ item.organizer }}</div>
            <div class="item-tit">
                <span class="i-lable">比赛时间：</span>
                {{ item.startDate }} ~ {{ item.endDate }}
            </div>
        </div>
    </NewRaceList>
    <FixedMenu />
    <!-- 底部 -->
    <Footer></Footer>
</template>
<script setup lang="ts">
import { reactive, onMounted } from "vue";
import BannerWrap from "@/components/contests/BannerWrap.vue";
import HotRaceList from "@/components/contests/HotRaceList.vue";
import NewRaceList from "@/components/contests/NewRaceList.vue";
import Pagination from "@/components/contests/Pagination.vue";
import { getContestList, getNowCoutest } from "@/api/contest";
import { newRaceDataType } from "@/types/coutest";
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
onMounted(() => {
    useGetContestList();
});
// 热门竞赛的数据
let hotRaceData = reactive({
    hotRaceList: [], // 热门竞赛列表
    navigationTitle: { value: "热门竞赛", info: [] },
});
// 热门分页器的数据
let paginationDate = reactive({
    page: 1, // 第几页
    limit: 10, // 每页多少条数据
    total: 0, // 总共多少条数据
});
/**
 * 获取热门竞赛列表
 */
const useGetContestList = () => {
    getContestList(paginationDate.page + "", paginationDate.limit + "").then(res => {
        hotRaceData.hotRaceList = res.data.data.rows;
        paginationDate.total = res.data.data.total;
    });
};
// 根据分类获取竞赛列表
const getContestListByCategory = (id: string) => {
    // 如果是点击全部
    if (id === "0") {
        useGetContestList();
        return;
    }
    getContestList(paginationDate.page + "", paginationDate.limit + "", id).then(res => {
        hotRaceData.hotRaceList = res.data.data.rows;
        paginationDate.total = res.data.data.total;
    });
};
/**
 * 热门分页器改变页码
 * @param page 页码
 */
const changePage = (page: number) => {
    paginationDate.page = page;
    useGetContestList();
};

// 最新竞赛
const newRaceData = reactive<newRaceDataType>({
    // 竞赛列表
    hotRaceList: [],
    newRaceTitle: {
        value: "最新竞赛",
        info: "最新发布的省级以上竞赛，列表每日更新",
    },
});

onMounted(async () => {
    let res = await getNowCoutest();
    newRaceData.hotRaceList = res.data.data;
});
</script>
<style lang="scss" scoped></style>
